<template>
  <!-- 背景 -->
  <img :class="video_img.class" :style="beijinMoHuDu">
  <video v-if="video_img.ifs" :src="video_img.src" :class="video_img.class" :style="beijinMoHuDu" autoplay muted loop preload="auto"></video>
  <!-- 内容主体 -->
  <nav class="ground" :style="brightness" @click.left="ClickLief" @click.right="ClickRight">
    <!-- 时间 -->
    <times/>
    <inputbox @input-focus="handleInputFocus" @input-blur="handleInputBlur" />
  </nav>
</template>

<script>
import times from "./TimeEvent.vue";
import inputbox from "./InputBox.vue";
export default {
  components: {
    times,
    inputbox,
  },
  data() {
    return {
      video_img: {
        ifs: true, // 视频是否展示
        src: require('@/assets/75.mp4'),
        src1: require("@/assets/A.jpg"),
        class: ["video"],
        filter: 0,
        brightness: 0,
      },
      isInputFocused: false, // 用于跟踪输入框是否聚焦
    };
  },
  computed: {
    // 背景模糊度
    beijinMoHuDu() {
      return {
        filter: `blur(${this.video_img.filter}px)`,
      };
    },
    // 明度
    brightness() {
      return {
        background: `rgba(0,0,0,${this.video_img.brightness})`,
      };
    },
  },
  methods: {
    handleInputFocus() {
      this.isInputFocused = true;
      this.video_img.filter = 10;
    },
    handleInputBlur() {
      this.isInputFocused = false;
      this.video_img.filter = 0;
    },
    ClickRight(event) {
      if (!this.isInputFocused) {
        this.video_img.filter = 10;
      }
      event.preventDefault();
    },
    ClickLief() {
      if (!this.isInputFocused) {
        this.video_img.filter = 0;
      }
    },
  },
};
</script>

<style>
.video {
  position: fixed;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  margin: 0;
  transition: 0.5s;
}

.ground {
  position: fixed;
  width: 100vw;
  height: 100vh;
}
</style>
